<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对齐属性 vertical-align
		     使用方法：1.用于表格单元垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					   【文本和图片垂直居中(对齐)效果】
					    对齐：①基线对齐
						     ②居中对齐
							 ③顶部对齐
							 ④底部对齐
					  元素种类：块元素、行元素、行内块元素
					  块元素特点：独占一行、可设置宽高
					  行元素特点：一行内显示、不可设置宽高
					  网页：元素之间嵌套生成
					  行元素和块元素可以任意嵌套
					  前提：设置宽高---行套块
					               ---块套块 ✔
								   ---块套行 ✔
		              前提：一行内显示---行套块 ✔
					                 ---块套块 ✖
								     ---块套行 ✔
									 ---行套行 ✔
		 -->
		 <style>
			 p i mg:nth-child(1){
				 /* vertical-align:baseline 默认基线对齐*/
				 vertical-align: baseline;
			 }
			 p i mg:nth-child(2){
				 vertical-align: top;
			 }
			 .baseline{
				 vertical-align: baseline;
			 }
			 .middle{
				 vertical-align: middle;
			 }
			 .top{
				 vertical-align: top;
			 }
			 .bottom{
				 vertical-align: bottom;
			 }
		 </style>
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字：图片叫什么名字
		                    文字后加img，设定宽高20~50
							每个图片后加：①基线对齐
						                ②居中对齐
							            ③顶部对齐
							            ④底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>哪吒<img class="baseline" src="./img/哪吒.png" alt="魔丸" width="200px" height="200px">基线对齐</p>
		 <p>敖丙<img class="middle" src="./img/敖丙.png" alt="灵珠" width="200px" height="200px">居中对齐</p>
		 <p>太乙真人<img class="top" src="./img/太乙真人.png" alt="太乙真人" width="200px" height="200px">顶部对齐</p>
		 <p>申公豹<img class="bottom" src="./img/申公豹.png" alt="申公豹" width="80px" height="250px">底部对齐</p>
		 <!-- css选择器--抓取第一张图片
		      思路：派生选择器：找后代+伪类选择器：添加效果【✖】
		      p img:nth-child(1){
				  
			  }
			  错误原因：html结构不符合派生特点：p包含4个img
		 -->
	</body>
</html>